<template>
	<view>
		<view style="background-color: #F4F4F4;width: 750rpx;height: 20rpx;"></view>
		<view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">避灾场所名</view>
				<input type="text" :value=list.name class="inputIn" @input="nameIpt" placeholder="请输入(必填)" placeholder-style="color:#CCCCCC"/>
			</view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">场所简称</view>
				<input type="text" :value=list.abbreviation class="inputIn" @input="abbreviation" placeholder="请输入(必填)" placeholder-style="color:#CCCCCC"/>
			</view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">社区负责人</view>
				<input type="text" :value=list.fireSafetyManagerName class="inputIn" @input="fireSafetyManagerName" placeholder="请输入(必填)" placeholder-style="color:#CCCCCC"/>
			</view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">建档单位</view>
				<input type="text" :value=list.archives class="inputIn" @input="archives" placeholder="请输入(必填)" placeholder-style="color:#CCCCCC"/>
			</view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">项目名称</view>
				<input type="text" :value=list.projectName class="inputIn" @input="projectName" placeholder="请输入(必填)" placeholder-style="color:#CCCCCC"/>
			</view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">联系人</view>
				<input type="text" :value=list.corporation class="inputIn" @input="corporation" placeholder="请输入(必填)" placeholder-style="color:#CCCCCC"/>
			</view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">联系人电话</view>
				<input type="text" :value=list.corporationMobile class="inputIn" @input="corporationMobile" placeholder="请输入(必填)" placeholder-style="color:#CCCCCC"/>
			</view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">行业类型</view>
				<picker mode="selector" :range="array" :value="0" @change="bindchange" range-key="value" style="float: left;margin-left: 52rpx;">
					
					<view style="font-size: 34rpx;line-height: 92rpx;float: left;">{{list.industryTypeName}}</view>
					<image src="../../static/iconjiantou@3x.png" style="width: 44rpx;height: 44rpx;margin-top: 24rpx;right: 10rpx;position: absolute;"></image>
				</picker>
			</view>
			<view class="box-input">
				<view class="name" style="color:#CCCCCC ;">所属街道</view>
				<input type="text" :value=list.areaName class="inputIn" @input="areaName" disabled="true" style="color:#CCCCCC ;"/>
			</view>
			<view class="box-input" style="height: 200rpx;">
				<view class="icon-xing">* </view>
				<view class="name">详细地址</view>
				<textarea style="margin-top: 26rpx;" maxlength="70" type="text" :value=list.address class="inputIn" @input="address" auto-height="true" placeholder="请输入(必填)" placeholder-style="color:#CCCCCC"/>
			</view>
			<view class="box-input">
				<view class="name" style="color:#CCCCCC ;">所属社区</view>
				<input type="text" :value=list.community class="inputIn" @input="community" disabled="true" style="color:#CCCCCC ;" />
			</view>
			<view class="box-input">
				<view class="name" style="color:#CCCCCC ;">坐标</view>
				<view  style="color:#CCCCCC;margin-left: 19%" class="name">{{list.x}},{{list.y}}</view>
			</view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">竣工日期</view>
				<picker mode="date" :value=list.completedTime :start="startDate" :end="endDate" @change="bindDateChange">
					<view style="font-size: 34rpx;line-height: 92rpx;float: left;margin-left: 50rpx;">{{list.completedTime}}</view>
					<image src="../../static/iconjiantou@3x.png" style="width: 44rpx;height: 44rpx;margin-top: 24rpx;right: 10rpx;position: absolute;"></image>
				</picker>
			</view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">使用年限</view>
				<input type="text" :value=list.years class="inputIn" @input="years" placeholder="请输入(必填)" placeholder-style="color:#CCCCCC"/>
			</view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">建筑层数</view>
				<input type="text" :value=list.layers class="inputIn" @input="layers" placeholder="请输入(必填)" placeholder-style="color:#CCCCCC"/>
			</view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">地上层数</view>
				<input type="text" :value=list.upLayers class="inputIn" @input="upLayers" placeholder="请输入(必填)" placeholder-style="color:#CCCCCC"/>
			</view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">地下层数</view>
				<input type="text" :value=list.downLayers class="inputIn" @input="downLayers" placeholder="请输入(必填)" placeholder-style="color:#CCCCCC"/>
			</view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">使用面积</view>
				<input type="text" :value=list.floorSpace class="inputIn" @input="floorSpace" placeholder="请输入(必填)" placeholder-style="color:#CCCCCC"/>
			</view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">级别</view>
				<picker mode="selector" :range="arrayLevel" :value="0" @change="bindchangeLevel" range-key="value" style="float: left;margin-left: 120rpx;">
					
					<view style="font-size: 34rpx;line-height: 92rpx;float: left;">{{list.grade}}</view>
					<image src="../../static/iconjiantou@3x.png" style="width: 44rpx;height: 44rpx;margin-top: 24rpx;right: 10rpx;position: absolute;"></image>
				</picker>
			</view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">房屋类型</view>
				<picker mode="selector" :range="arrayStyle" :value="0" @change="bindchangeStyle" range-key="value" style="float: left;margin-left: 50rpx;">
					
					<view style="font-size: 34rpx;line-height: 92rpx;float: left;">{{list.houseType}}</view>
					<image src="../../static/iconjiantou@3x.png" style="width: 44rpx;height: 44rpx;margin-top: 24rpx;right: 10rpx;position: absolute;"></image>
				</picker>
			</view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">结构类型</view>
				<picker mode="selector" :range="arrayJiegou" :value="0" @change="bindchangeJiegou" range-key="value" style="float: left;margin-left: 50rpx;">
					
					<view style="font-size: 34rpx;line-height: 92rpx;float: left;">{{list.structureType}}</view>
					<image src="../../static/iconjiantou@3x.png" style="width: 44rpx;height: 44rpx;margin-top: 24rpx;right: 10rpx;position: absolute;"></image>
				</picker>
			</view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">初始等级</view>
				<picker mode="selector" :range="arrayBegin" :value="0" @change="bindchangeBegin" range-key="value" style="float: left;margin-left: 50rpx;">
					
					<view style="font-size: 34rpx;line-height: 92rpx;float: left;">{{list.initialLevel}}</view>
					<image src="../../static/iconjiantou@3x.png" style="width: 44rpx;height: 44rpx;margin-top: 24rpx;right: 10rpx;position: absolute;"></image>
				</picker>
			</view>
			<view class="box-input">
				<view class="icon-xing">* </view>
				<view class="name">总建筑面积</view>
				<input type="text" :value=list.measure class="inputIn" @input="measure" placeholder="请输入(必填)" placeholder-style="color:#CCCCCC"/>
			</view>
		</view>
		<view style="margin-top: 40rpx;margin-bottom: 30rpx;">
			<button style="width: 690rpx;height: 80rpx;background-color: #519AFF;font-size: 34rpx;line-height: 80rpx;color: #FFFFFF;" @click="finish()">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
			           format: true
			       })
			return {
				item:'100',
				array:[
					{name: '29', value: '县（市、区）级避灾安置场所'},
					{name: '32', value: '乡镇（街道）级避灾安置场所 '},
					{name: '33', value: '村（社区）级避灾安置场所'},
				],
				name:'县（市、区）级避灾安置场所',
				nameDate:'1990-01-01',
				date: currentDate,
				arrayLevel:[
					{name: 'week', value: '村级'},
					{name: 'month', value: '社区级 '},
					{name: 'year', value: '街道级'},
					{name: 'zhen', value: '镇'},
					{name: 'qu', value: '区级'},
				],
				Levelname:'村级',
				arrayStyle:[
					{name: 'week', value: '菜市场'},
					{name: 'month', value: '村办公楼'},
					{name: 'year', value: '工人文化馆'},
					{name: 'zhen', value: '礼堂'},
					{name: 'qu', value: '老年活动室'},
					{name: 'qunfang', value: '裙房'},
					{name: 'market', value: '商场'},
					{name: 'school', value: '学校'},
					{name: 'shequ', value: '社区服务中心'},
					{name: 'wenhua', value: '文化中心'},
					{name: 'xi', value: '喜事房'},
					{name: 'bai', value: '白事房'},
					{name: 'zhuzhai', value: '住宅楼'},
				],
				nameStyle:'社区服务中心',
				arrayJiegou:[
					{name: 'week', value: '砖木结构'},
					{name: 'month', value: '混合结构（砖混）'},
					{name: 'year', value: '混合结构（砖混，底框）'},
					{name: 'zhen', value: '钢筋混凝土结构（框架）'},
					{name: 'qu', value: '钢筋混凝土结构（框剪）'},
					{name: 'qunfang', value: '钢筋混凝土结构（剪力墙）'},
					{name: 'market', value: '钢（钢筋）混凝土结构'},
					{name: 'school', value: '钢结构'},
					{name: 'shequ', value: '其他'},
				],
				nameJiegou:'框架结构',
				arrayBegin:[
					{name: 'week', value: '一级'},
					{name: 'month', value: '二级'},
					{name: 'year', value: '三级'},
					{name: 'zhen', value: '四级'},
				],
				nameBegin:'一级',
				ownerId:'',
				list:[],
			}
		},
		methods: {
			async getName(){
				this.$myRequest({
					url:`/project_flood/v1/owner_flood/detail`,
					data:{id:this.ownerId}
				}).then((res)=>{
					console.log(res);
					this.list=res.data.data
				})
			},
			bindchange(e){
				console.log(e,'111');
				
				let index=e.detail.value;
				this.list.industryTypeName=this.array[index].value
				this.list.industryType=this.array[index].name
			},
			bindDateChange(e){
				this.list.completedTime = e.target.value
				
				
			},
			bindchangeLevel(e){
				let index=e.detail.value;
				this.list.grade=this.arrayLevel[index].value;
			},
			bindchangeStyle(e){
				let index=e.detail.value;
				this.list.houseType=this.arrayStyle[index].value;
			},
			bindchangeJiegou(e){
				let index=e.detail.value;
				this.list.structureType=this.arrayJiegou[index].value;
			},
			bindchangeBegin(e){
				let index=e.detail.value;
				this.list.initialLevel=this.arrayBegin[index].value;
			},
			getDate(type) {
				            const date = new Date();
				            let year = date.getFullYear();
				            let month = date.getMonth() + 1;
				            let day = date.getDate();
				
				            if (type === 'start') {
				                year = year - 60;
				            } else if (type === 'end') {
				                year = year + 2;
				            }
				            month = month > 9 ? month : '0' + month;
				            day = day > 9 ? day : '0' + day;
				            return `${year}-${month}-${day}`;
				        },
			nameIpt(e){
				this.list.name=e.target.value
			},
			abbreviation(e){
				this.list.abbreviation=e.target.value
			},
			fireSafetyManagerName(e){
				this.list.fireSafetyManagerName=e.target.value
			},
			archives(e){
				this.list.archives=e.target.value
			},
			projectName(e){
				this.list.projectName=e.target.value
			},
			corporation(e){
				this.list.corporation=e.target.value
			},
			corporationMobile(e){
				this.list.corporationMobile=e.target.value
			},
			address(e){
				this.list.address=e.target.value
			},
			years(e){
				this.list.years=e.target.value
			},
			layers(e){
				this.list.layers=e.target.value
			},
			upLayers(e){
				this.list.upLayers=e.target.value
			},
			downLayers(e){
				this.list.downLayers=e.target.value
			},
			floorSpace(e){
				this.list.floorSpace=e.target.value
			},
			measure(e){
				this.list.measure=e.target.value
			},
			finish(){
				let data = {
					name:this.list.name,
					abbreviation:this.list.abbreviation,
					fireSafetyManagerName:this.list.fireSafetyManagerName,
					archives:this.list.archives,
					projectName:this.list.projectName,
					corporation:this.list.corporation,
					corporationMobile:this.list.corporationMobile,
					industryTypeName:this.list.industryTypeName,
					industryType:this.list.industryType,
					areaId:this.list.areaId,
					areaName:this.list.areaName,
					address:this.list.address,
					community:this.list.community,
					x:this.list.x,
					y:this.list.y,
					completedTime:this.list.completedTime,
					years:this.list.years,
					layers:this.list.layers,
					upLayers:this.list.upLayers,
					downLayers:this.list.downLayers,
					floorSpace:this.list.floorSpace,
					grade:this.list.grade,
					houseType:this.list.houseType,
					structureType:this.list.structureType,
					initialLevel:this.list.initialLevel,
					measure:this.list.measure,
					id:this.ownerId
				}
				this.$myRequest({
					url:'/project_flood/v1/owner_flood/modify',
					data:data
				}).then((res)=>{
					console.log('成功');
					uni.navigateBack({
						
					})
					})
			}
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
			onLoad(options) {
				this.ownerId=options.ownerId
				this.getName()
			}
	}
</script>

<style>
page{background-color: #FFFFFF;}
.box-input{
	height: 94rpx;width: 720rpx;margin-left: 30rpx;border-bottom: 2rpx solid #E5E5E5;
}
.icon-xing{
	float: left;color: #E93B3D;font-size: 34rpx;line-height: 92rpx;
}
.name{
	float: left;font-size: 34rpx;line-height: 92rpx;margin-left: 5rpx;
}
.inputIn{
	font-size: 34rpx;float: right;width: 510rpx;height: 94rpx;
}
</style>
